
import 'package:baby/Entities/Comment/Comment.dart';
import 'package:baby/Entities/Record/PhotoRecord.dart';
import 'package:baby/Entities/Record/TextRecord.dart';
import 'package:baby/Entities/Record/VideoRecord.dart';
import 'package:baby/UI/Widgets/Painter.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:intl/intl.dart' show DateFormat;
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_icons/font_awesome.dart';


class RecordViewer extends StatefulWidget {
  TextRecord record;

  RecordViewer({this.record}) : assert(record != null);

  @override
  State<StatefulWidget> createState() => _RecordViewerState();
}

class _RecordViewerState extends State<RecordViewer> {
  final imageSize = 105.0;

  @override
  Widget build(BuildContext context) {
    var record = widget.record;

    Widget content;
    Icon icon = Icon(Icons.message, color: Colors.white,);
    if (record is PhotoRecord){
      icon = Icon(Icons.image, color: Colors.white,);
      content = content = Wrap(
          children: record.photos.map((photo) => Padding(
            padding: EdgeInsets.all(3.0),
            child: CachedNetworkImage(
              imageUrl: photo,
              height: imageSize,
              width: imageSize,
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(width: imageSize, height: imageSize, color: Colors.black12,),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),).toList()
      );
    }

    if (record is VideoRecord) {
      icon = Icon(Icons.ondemand_video, color: Colors.white,);
      content = Wrap(
          children: record.videos.map((video) => Padding(
            padding: EdgeInsets.all(3.0),
            child: CachedNetworkImage(
              imageUrl: video,
              height: imageSize,
              width: imageSize,
              fit: BoxFit.cover,
              placeholder: (context, url) => Container(width: imageSize, height: imageSize, color: Colors.black12),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),).toList()
      );
    }


    return Container(
//      color: Color(0x11000000),
      child: buildTimeLineItem(Row(
        children: <Widget>[
          SizedBox(width: 10.0,),
          Expanded(
            child: Card(
              child: Padding(
                padding: EdgeInsets.all(5.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        Chip(label: Text(DateFormat("M/d H:m").format(record.dateTime), style: TextStyle(color: Colors.white), textDirection: TextDirection.ltr,), backgroundColor: Theme.of(context).primaryColor, avatar: icon,),
                        Padding(
                          padding: EdgeInsets.symmetric(horizontal: 5.0),
                          child: Chip(label: Text("40 كۈن",), avatar: Icon(Icons.access_time),),
                        ),
                        if (record.tag?.label != null) Chip(label: Text(record.tag.label, overflow: TextOverflow.fade,), avatar: Icon(Icons.tag_faces),),
                      ],
                    ),
                    if (content != null) content,
                    Text(record.content),
//                    Divider(),
                    Row(
                      children: <Widget>[
                        IconButton(
                          icon: Icon(Icons.message),
                          onPressed: (){},
                        ),
                        IconButton(
                          icon: Icon(Icons.favorite),
                          onPressed: (){},
                        ),
                        IconButton(
                          icon: Icon(Icons.share),
                          onPressed: (){},
                        ),
                        Spacer(),
                        Row(
                          children: <Widget>[
                            Text("پالانى"),
                            CircleAvatar(
                              radius: 15.0,
                              backgroundColor: Theme.of(context).primaryColor,
                              backgroundImage: NetworkImage("https://banner2.kisspng.com/20180509/zde/kisspng-avatar-youtube-8-ball-pool-user-5af328dc1be026.0480517715258851481142.jpg"),
                            ),
                          ],
                        ),
                      ],
                    ),
                    Divider(),
                    for (var comment in record.comments ?? []) buildCommentItem(comment)
                  ],
                ),
              )
            )
          )
        ],
      ))
    );
  }

  Widget buildCommentItem(Comment comment){
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Row(
          children: <Widget>[
            buildCommentAvatar(comment),
            Spacer(),
            Transform.rotate(
              angle: 3.14,
              child: IconButton(
                icon: Icon(FontAwesome.getIconData("thumbs-up")),
                onPressed: (){},
              ),
            ),
            IconButton(
              icon: Icon(FontAwesome.getIconData("thumbs-up")),
              onPressed: (){},
            ),
          ],
        ),
        Padding(
          padding: EdgeInsets.only(bottom: 10, left: 10, right: 10),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              if (comment.replayTo != null) buildReplayCommentItem(comment),
              Text(comment.content),
              if (comment.comments.isNotEmpty) Row(
                children: <Widget>[
                  Spacer(),
                  Text("چىكىپ ${comment.comments.length} دانە ئۇچۇرنى كۆرۈڭ", style: TextStyle(color: Theme.of(context).primaryColor), textAlign: TextAlign.center,),
                  Spacer(),
                ],
              )
            ],
          ),
        ),
        Divider(),
      ],
    );
  }

  Widget buildReplayCommentItem(Comment comment){
    return Container(
      color: Color(0x05000000),
      child: Opacity(
        opacity: 0.4,
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              width: 1.0,
              height: 40.0,
              color: Colors.black38,
              margin: EdgeInsets.symmetric(horizontal: 10.0),
            ),
            Text("@Userrrr", style: TextStyle(color: Theme.of(context).primaryColor),),
            SizedBox(width: 5.0,),
            Expanded(child: Text(comment.replayTo.content, maxLines: 1, overflow: TextOverflow.ellipsis,),)
          ],
        ),
      ),
    );
  }

  Widget buildCommentAvatar(Comment comment){
    return Wrap(
      children: <Widget>[
        CircleAvatar(
          radius: 15.0,
          backgroundColor: Theme.of(context).primaryColor,
          backgroundImage: NetworkImage("https://banner2.kisspng.com/20180509/zde/kisspng-avatar-youtube-8-ball-pool-user-5af328dc1be026.0480517715258851481142.jpg"),
        ),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("پالانى"),
            Text(DateFormat("yyyy/MM/dd HH:mm:ss").format(comment.dateTime), textDirection: TextDirection.ltr, style: TextStyle(fontSize: 10.0),)
          ],
        ),
      ],
    );
  }

  Widget buildTimeLineItem(Widget child) => CustomPaint(
    child: child,
    painter: Painter(
        shouldRepaintMethod: (painter) => false,
        paintMethod: (canvas, size){
          var direction = Directionality.of(context);
          var xPoint = direction == TextDirection.rtl ? size.width - 5 : 5.0;

          var paint = Paint();
          paint.color = Colors.black12;
          paint.strokeWidth = 2;
          canvas.drawLine(Offset(xPoint, 0.0), Offset(xPoint, size.height), paint);

          paint.color = Theme.of(context).primaryColor;
          canvas.drawCircle(Offset(xPoint, 31), 5.0, paint);
        },
    ),
  );
}

